import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Fill" component={Fill} />

## Fill

Space which fills all remaining space taken up by anchored spaces.

### With a left space

<Canvas>
	<Story name="With left space">
		<ViewPort>
			<Left size="20%">{description("Left 20%")}</Left>
			<Fill style={green}>{description("Fill")}</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a top space

<Canvas>
	<Story name="With top space">
		<ViewPort>
			<Top size="20%">{description("Top 20%")}</Top>
			<Fill style={green}>{description("Fill")}</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a right space

<Canvas>
	<Story name="With right space">
		<ViewPort>
			<Right size="20%">{description("Right 20%")}</Right>
			<Fill style={green}>{description("Fill")}</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a bottom space

<Canvas>
	<Story name="With bottom space">
		<ViewPort>
			<Bottom size="20%">{description("Bottom 20%")}</Bottom>
			<Fill style={green}>{description("Fill")}</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a left resizable space

<Canvas>
	<Story name="With left resizable space">
		<ViewPort>
			<LeftResizable size="20%" trackSize={true}>
				{description("Left resizable 20%")}
			</LeftResizable>
			<Fill style={green} trackSize={true}>
				{description("Fill")}
			</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a top resizable space

<Canvas>
	<Story name="With top resizable space">
		<ViewPort>
			<TopResizable size="20%" trackSize={true}>
				{description("Top resizable 20%")}
			</TopResizable>
			<Fill style={green} trackSize={true}>
				{description("Fill")}
			</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a right resizable space

<Canvas>
	<Story name="With right resizable space">
		<ViewPort>
			<RightResizable size="20%" trackSize={true}>
				{description("Right resizable 20%")}
			</RightResizable>
			<Fill style={green} trackSize={true}>
				{description("Fill")}
			</Fill>
		</ViewPort>
	</Story>
</Canvas>

### With a bottom resizable space

<Canvas>
	<Story name="With bottom resizable space">
		<ViewPort>
			<BottomResizable size="20%" trackSize={true}>
				{description("Bottom resizable 20%")}
			</BottomResizable>
			<Fill style={green} trackSize={true}>
				{description("Fill")}
			</Fill>
		</ViewPort>
	</Story>
</Canvas>

### As a scrollable space

<Canvas>
	<Story name="Scrollable">
		<ViewPort>
			<Fill style={green} scrollable={true}>
				{lorem}
			</Fill>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<StandardProps />
	</PropsTable>
</Story>